<template>
	<view class="content">
		<!-- 导航栏 -->
		<van-nav-bar fixed>
			<template #left>
				<text>客资</text>
			</template>
			<template #right>
				<van-search v-model="query.mobile" placeholder="请输入手机号" @search="getPageData()"
					@clear="getPageData()" />
				<view class="right_text btn-vertical" slot="right_text" @click="toAddView()">
					<image src="@/static/approval/add.png" class="btnIcon"></image>
					<view class="navRightTitle">新增</view>
				</view>
				<!-- @click="showMoreSearch() -->
				<view class="btn-vertical" @click="showMoreSearch()">
					<image src="@/static/approval/classify.png" class="btnIcon"></image>
					<text class="navRightTitle">筛选１</text>
				</view>
				<view class="btn-vertical" @click="showMoreSearch1()">
					<image src="@/static/approval/classify.png" class="btnIcon"></image>
					<text class="navRightTitle">筛选</text>
				</view>
			</template>
		</van-nav-bar>

		<view class="page-main">
			<van-tabs v-model="query.active_status" @change="getListData()">
				<template v-for="(item,index) in tabs">
					<van-tab v-if="item.count" :key="index" :title="item.title" :badge="item.count" :name="item.id+''">
					</van-tab>
					<van-tab v-else="item.count" :key="index" :title="item.title" :name="item.id+''"></van-tab>
				</template>
			</van-tabs>

			<search-tree ref="search-tree" :parent="_self" :query="query"></search-tree>
			<search-pop ref="searchPop" :parent="_self" :query="query">
			</search-pop>
			<view class="customer-list-group">
				<view class="mt8" @click="goTo(item)" v-for="(item, index) in list" :key="index">
					<van-cell-group>
						<van-cell :title="'客户名称:' + item.realname" is-link>
							<template #default>
								<view :style="'color:' + item.color">{{ item.active_status }}</view>
							</template>
						</van-cell>
						<van-cell title="联系方式" :value="item.mobile" />
						<van-cell title="婚期" :value="item.wedding_date" v-if="item.wedding_date" />
						<van-cell title="区域" :value="item.zone" v-if="item.zone" />
					</van-cell-group>
				</view>
			</view>

			<van-pagination mode="simple" v-model="query.page" :total-items="totalItems" :items-per-page="query.limit"
				class="pagination" @change="getListData()" />
		</view>

	</view>
</template>

<script>
	import searchTree from './components/searchTree.vue';
	import searchPop from './components/searchPop.vue';
	import sun from '@/utils/sun.js';
	let query = {
		mobile: '',
		allocate_type: 'all',
		active_status: 'all',
		user_id: [],
		range: 'all',
		page: 1,
		limit: 40,
	};

	export default {
		components: {
			searchTree,
			searchPop
		},
		data() {
			return {
				tabs: [],
				query: Object.assign({}, query),
				list: [],
				totalItems: 0
			};
		},
		onLoad(options) {
			this.options = options;
			this.getPageData()
		},
		onHide() {
			// this.$refs['search-tree'].cancelSearch();
		},
		methods: {
			toAddView() {
				uni.navigateTo({
					url: '/pages/customer/add'
				});
			},
			goTo(e) {
				uni.navigateTo({
					url: '/pages/customer/detail?id=' + e.id + '&member_id=' + e.member_id
				});
			},
			showMoreSearch() {
				let _this = this;
				this.$refs['searchPop'].showSearchPop(this.options)
				// if (this.$refs['search-tree']) {
				// 	this.$refs['search-tree'].showSearchTree();
				// } else {
				// 	this.$nextTick(function() {
				// 		this.$refs['search-tree'].showSearchTree();
				// 	})
				// }
			},
			showMoreSearch1() {
				let _this = this;
				if (this.$refs['search-tree']) {
					this.$refs['search-tree'].showSearchTree();
				} else {
					this.$nextTick(function() {
						this.$refs['search-tree'].showSearchTree();
					})
				}
			},
			resetSearchItem() {
				this.query = Object.assign({}, query);
			},
			getPageData() {
				this.getListData();
				this.getCount()
			},
			// 获取数据统计
			getCount() {
				let that = this;
				let query = Object.assign({}, this.query);

				sun.request({
					url: '/h5/customer.customer/count',
					showLoading: true,
					token: true,
					data: query,
					success(res) {
						if (res.code == '200') {
							that.tabs = res.data;
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			// 获取数据
			getListData() {
				let _this = this;
				let query = Object.assign({}, this.query);
				sun.request({
					url: '/h5/customer.customer/mine',
					showLoading: true,
					token: true,
					data: query,
					success(res) {
						if (res.code == 200) {
							_this.list = res.data;
							_this.totalItems = res.count;
							// console.log(_this)
							// _this.$forceUpdate()
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			}
		}
	};
</script>

<style lang="less">
	.van-search {
		padding: 5px 10px;
	}

	;

	.btnIcon {
		width: 50upx;
		height: 50upx;
	}

	.btn-vertical {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.navRightTitle {
		width: 50upx;
		text-align: center;
		font-size: 18upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(82, 123, 241, 1);
		margin-top: -5px;
	}

	page,
	.content {
		// position: fixed;
		width: 100%;
		// height: calc(100vh - 60px) ;
		overflow: auto;
		// padding-top: 46px;
		padding-top: 0;
		background-color: #f8f8f8;
		z-index: 999;

		// padding-bottom: 80upx;
		.page-main {
			padding: 52px 0;

			.customer-list-group {
				padding-bottom: 12px;
			}

			.pagination {
				background-color: #fff;
				border-top: 1px solid #f7f8fa;
				box-shadow: 0 0px 6px 1px rgba(153, 153, 153, .6);

				/deep/ li {
					background-color: #fff !important;
				}
			}
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			border-top: 1px solid #f7f8fa;
			box-shadow: 0 0px 6px 1px rgba(153, 153, 153, .6);

			/deep/ li {
				background-color: #fff !important;
			}
		}
	}

	.mt8 {
		margin-top: 8px;
	}

	.mt12 {
		margin-top: 12px;
	}

	.mt20 {
		margin-top: 20px;
	}
</style>
